// npm i -S redux
// createStore直接在redux中导入是可以的，不过编辑器会提示它废弃，不建议用
// 可以用legacy_createStore,兼容库来完成
// import { createStore,legacy_createStore } from 'redux'
import { legacy_createStore as createStore, applyMiddleware } from 'redux'
// 异步解决中间件方案，此中间件可以让我们在action中不但可以同步也可以异步，异步就是要返回一个函数
import { thunk } from 'redux-thunk'
// 浏览器调试，可以不去配置
import { composeWithDevTools } from '@redux-devtools/extension'
import cloneDeep from 'lodash/cloneDeep'

const initState = {
  count: 100
}

// 纯函数reducer用来修改state数据，返回一个新的state
const reducer = (state = initState, action) => {
  let newState = cloneDeep(state)

  if (action.type == 'add') {
    newState.count += action.payload
  }
  return newState
}

// 自定义中间件
// const myMid = (store) => (next) => (action) => {
//   // console.log('next', next)
//   // console.log('action', action)
//   // action它在异步处理时肯定返回的是一个函数，所以手动去执行action得到它的结果，再去调用dispatch执行
//   // 这样就实现了中间异步处理
//   if (typeof action === 'function') {
//     console.log(action)
//     return action(store.dispatch, store.getState)
//   }
//   next(action)
// }

// const store = createStore(reducer, applyMiddleware(thunk, myMid))
// const store = createStore(reducer, applyMiddleware(myMid))
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store
